<!doctype html>
<html>
   <head>
      <title>Humane JS</title>
      <link href='http://fonts.googleapis.com/css?family=Ubuntu&v2' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:700&v2' rel='stylesheet' type='text/css'>
      <style>
         body {
            font-family: Ubuntu, sans-serif;
            padding: 80px;
            background-color: #f0f0f0;
         }
         h1,h3 {
            font-family: 'Cabin Sketch', serif;
            text-shadow: -1px 0px 1px #aaa;
         }
         h1 {
            font-size: 4em;
            margin: 0
         }
         h3 {
            font-size: 2em;
            margin: 0
         }
         a {
            text-decoration: none;
            color: #a13;
            font-weight: bold;
         }
         a:hover {
            text-decoration: underline;
         }
         pre {
            font-family: "Ubuntu Mono";
            font-size: 0.9em;
            background-color: #fff;
            border: 1px solid #aaa;
            border-radius: 6px;
            padding: 10px;
            text-decoration: none;
         }
         blockquote {
            font-size: 0.8em
         }
      </style>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <link id='theme' rel='stylesheet' href='themes/bigbox.css'/>
      <script src='humane.js'></script>
   </head>
   <body>
      <a href="http://github.com/wavded/humane-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>

      <h1>Humane JS</h1>
      <p>A simple, modern, framework-independent, well-tested, unobtrusive, notification system.</p>
      <small>Samples (click to view): Theme: </small>
      <select onchange='document.getElementById("theme").href = "themes/" + this.options[this.selectedIndex].value + ".css"'>
         <option selected>bigbox</option>
         <option>libnotify</option>
         <option>boldlight</option>
         <option>jackedup</option>
      </select>

      <a href='javascript:humane.log("Welcome Back")'>
         <pre>humane("Welcome Back");
humane.log("Welcome Back");</pre>
      </a>
      <a href='javascript:humane.info("Record <b>392</b> has been updated")'>
         <pre>humane.info("Record &lt;b>392&lt;/b> has been updated");</pre>
      </a>
      <a href='javascript:humane.error("Invalid Username and/or Password")'>
         <pre>humane.error("Invalid Username and/or Password");</pre>
      </a>
      <a href='javascript:humane.success(["List","of","Items"])'>
         <pre>humane.success(["List","of","Items"]);</pre>
      </a>

      <h3>Options</h3>
      <pre>humane.timeout = (number of milliseconds);</pre>
      <blockquote>
         <p>Sets the delay before a message fades out.</p>
         <p>
            Try It:
            <input type='radio' name='timeout' onclick='humane.timeout = 2500' checked> 2500 <small>(2s - default)</small>
            <input type='radio' name='timeout' onclick='humane.timeout = 5000'> 5000 <small>(5s)</small>
            <input type='radio' name='timeout' onclick='humane.timeout = 500'> 500 <small>(0.5s)</small>
         </p>
      </blockquote>
      <pre>humane.waitForMove = (true|false);</pre>
      <blockquote>
         <p>Wait for mouse, or keyboard action to be taken before clearing message (after timeout)</p>
         <p>
            Try It:
            <input type='radio' name='waitformove' onclick='humane.waitForMove = true'> true
            <input type='radio' name='waitformove' onclick='humane.waitForMove = false' checked> false <small>(default)</small>
         </p>
      </blockquote>
      <pre>humane.forceNew = (true|false);</pre>
      <blockquote>
         <p>Force new messages to appear immediately</p>
         <p>
            Try It:
            <input type='radio' name='forceNew' onclick='humane.forceNew = true'> true
            <input type='radio' name='forceNew' onclick='humane.forceNew = false' checked> false <small>(default)</small>
         </p>
      </blockquote>

      <h3>Browser Support</h3>
      <p>Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.</p>
      <ul>
         <li>Internet Explorer 7+</li>
         <li>Firefox 3+</li>
         <li>Chrome 9+</li>
         <li>Safari 3+</li>
         <li>Opera 10+</li>
         <li>iOS (experimental support)</li>
         <li>Android (experimental support)</li>
      </ul>

      <h3>Themes</h3>
      <p>Humane is intended to be easily themable.  There are currently a few <a href='https://github.com/wavded/humane-js/wiki/Themes'>themes</a>, but I hope this grows.  Send me a pull request and update the wiki with your favorite look and feel.</p>


      <h3>Download and Usage</h3>
      Visit <a href='http://github.com/wavded/humane-js'>github page</a> to download and get more details.
   </body>
</html>
